<template>
  <van-row>
    <van-row class="side-nav">
      <h1 class="vant-title">
        <img src="https://img.yzcdn.cn/vant/logo.jpg">
        <span>vant-thero</span>
      </h1>
      <van-row class="vant-desc">轻量、可靠的移动端 Vue 组件库与调用移动设备组件库</van-row>
      <van-collapse v-model="activeNames">
        <van-collapse-item class="van-doc-demo-block__title" title="手机硬件调用" name="1">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item"
              :title="item"
              @click="showMessage(item)"
            />
          </van-list>
        </van-collapse-item>
      </van-collapse>
      <van-collapse v-model="activeNames" class="comment">
        <van-collapse-item class="van-doc-demo-block__title" title="第三方登陆" name="1">
          <van-cell
            @click="showWechat()"> 微信登陆
          </van-cell>
        </van-collapse-item>
      </van-collapse>
      <img id="myImage">
    </van-row>
  </van-row>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      activeNames: ['1'],
      list: ['摄像头调用'],
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad () {
      this.loading = false
      this.list = ['摄像头调用', '相册调用', 'GPS位置信息', '获得联系人信息', '极光推送', '图标库', '数据库管理']
    },
    showMessage (item) {
      var _this = this
      if (item === '摄像头调用') {
        this.$router.push('camera')
      } else if (item === '相册调用') {
        this.$router.push('photoLibrary')
      } else if (item === 'GPS位置信息') {
        this.$router.push('gprs')
      } else if (item === '获得联系人信息') {
        this.$router.push('contacts')
      } else if (item === '极光推送') {
        _this.getRegId()
      } else if (item === '图标库') {
        this.$router.push('icon')
      } else if (item === '数据库管理') {
        this.$router.push('Database')
      }
    },
    showWechat () {
      this.$router.push('wechat')
    },
    getRegId () {
      window.JPush.getRegistrationID(this.onGetRegistrationID)
    },
    onGetRegistrationID (data) {
      var _this = this
      try {
        alert('JPushPlugin:registrationID is ' + data)
        if (data.length === 0) {
          // eslint-disable-next-line no-undef
          window.setTimeout(_this.getRegistrationID, 1000)
          this.regid = data
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  .van-doc-demo-block__title{
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: rgba(69,90,100,.6);
    text-align: left;
  }
  .side-nav{
    box-sizing: border-box;
    width: 100%;
    padding: 64px 10px 10px;
  }
  .side-nav .vant-desc{
    margin: 0 0 40px;
    color: #7d7e80;
    font-size: 14px;
    text-align: left;
  }
  .vant-title{
    font-weight: normal;
    -webkit-user-select: none;
    user-select: none;
    margin: 0 0 16px;
    text-align: left;
  }
  .side-nav .vant-title img {
    width: 36px;
  }
  .van-cell__title{
    text-align: left;
  }
  .comment{
    margin: 10px 0px;
  }
</style>
